<template>
  <div>
    <div id="main1" style=" width: 100%;height: 500px"></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { renderChart } from '/@/api/tb/tbChart';
import {onMounted, onUnmounted, ref} from "vue";

let data_name=ref<any>([])
let data_value = ref<any>([])
let data = ref<any>([])

onMounted(() => {
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById('main1')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

const havedata = async () => {  
  const res = await renderChart();
  data_value.value = Object.values(res.data);
  let data_keys = ref([])
  let data_values = ref([])
  for (let item of data_value.value){
    console.log(item)
       data_keys.value.push(item.order_status)
      data_values.value.push(item.count_num)
  }
     option = {
         title:{
          text:"延期订单状态一览",
          textStyle:{
            color:"black",
            fontSize: 24,
          },
          left: 'center'
         },
         tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'shadow'
         }
       },
       grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
       },
       xAxis: [
         {
           type: 'category',
           name: '',
           data: data_keys.value,
           nameTextStyle:{
            fontSize:16,
           },
           axisTick: {
             alignWithLabel: true
           },
           axisLabel: {
              // 轴文字
              show:true,
              color: "#268C8C",
              fontSize: 12,
              interval: 0,  // 设置标签间隔为1  
              rotate: 45  // 设置标签旋转45度  
            },
            axisLine: {
              // 轴线
              show: true,
            },
         }
       ],
       yAxis: [
         {
           type: 'value',
           name: '流程',
          //  min: 0,  // 设置y轴最小值  
          //  max: 10,  // 设置y轴最大值  
           nameTextStyle:{
            fontSize:16,
           },
           axisLabel: {
            formatter: '{value}个',
            color: "#268C8C",
              fontSize: 12,
            } 
         }
       ],
       series: [
         {
           name: '个数',
           type: 'bar',
           barWidth: '90%',
           data: data_values.value,
           showBackground: true,
           backgroundStyle: {
           color: 'rgba(220, 220, 220, 0.8)'
              },
         }
       ]
     };
      option && myChart.setOption(option);
    };
    havedata()  
    window.onresize = function () {  
      myChart.resize();  
    };  
  }
);
onUnmounted(() => {
      echarts.dispose;
    });
</script>
